<template>
	<!-- 会议中心 -->
  <div class="public_content">
		<div class="bg-color-white boxsize-b">
			<div class="meeting_top over-h">
				<!-- 轮播图 -->
				<div class="banner po-re fl w-780 pr-5">
					<swiper :options="swiperOption" ref="mySwiper">
						<swiper-slide>
							<img src="~@/assets/img/5adafa20d7152.jpg" class="index_img">
							<span>学习宣传贯彻，党的十九大精神</span>
						</swiper-slide>
						<swiper-slide>
							<img src="~@/assets/img/5adaf60ba5f13.jpg" class="index_img">
							<span>交警支队党支部大会</span>
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
						<div class="swiper-button-prev swiper-button-white swiper-button-hidden" slot="button-prev"></div><!--左箭头-->
						<div class="swiper-button-next swiper-button-white swiper-button-hidden" slot="button-next"></div><!--右箭头-->
					</swiper>
				</div>
				<!-- 右侧图片会议 -->
				<div class="w-380 fr">
				    <router-link :to="{path: '/meetingCenter-detail'}" class='see-details'>
								<div class="h-245 w-all po-re over-h">
										<div class="bg-color-mask po-ab top-0 left-0 w-all h-all po-re">
												<p class="w-all po-ab bottom-20 fsize-18 fcolor-white center-text">交警支队党支部大会</p>
										</div>
										<div class="h-245">
												<img src="~@/assets/img/5adafa20d7152.jpg" class="" alt="新闻图片" width="100%">
										</div>
								</div>
				    </router-link>
						<router-link :to="{path: '/meetingCenter-detail'}" class='see-details'>
								<div class="h-245 w-all po-re over-h">
										<div class="bg-color-mask po-ab top-0 left-0 w-all h-all po-re">
												<p class="w-all po-ab bottom-20 fsize-18 fcolor-white center-text">交警支队党支部大会</p>
										</div>
										<div class="h-245">
												<img src="~@/assets/img/5adaf60ba5f13.jpg" class="" alt="新闻图片" width="100%">
										</div>
								</div>
				    </router-link>
				</div>
			</div>
			<div class="meeting_bottom mt-25 over-h">
				<!-- 未开会议 -->
				<div class="pull-left w-300 hr-sr-gray2">
					<div class="public_card_title">
						<span class="fsize-18">未开会议</span>
					</div>
					<ul class="mt-10">
						<li class="po-re over-h h-180 mb-20" v-for="(item,index) in meetingList.slice(0,1)">
							<router-link :to="{path: '/meetingCenter-detail'}" class='see-details'>
								<div>
										<img src="~@/assets/img/5adaf60ba5f13.jpg" class="h-all di-b center-ver">
								</div>
								<div class="di-tb po-ab bottom-0 h-50">
									<p class="di-tc w-70 va-m center-text bg-color-ff3032 fcolor-white font-bold">NO.{{index+1}}</p>
									<p class="di-tc va-m fcolor-66 p-0-10 bg-color-fff-op9" v-html="item.title"></p>
								</div>
							</router-link>
						</li>
						<li class="ov-h di-tb h-78 mb-20" v-for="(item,index) in meetingList.slice(1)">
							<router-link :to="{path: '/meetingCenter-detail'}" class='see-details over-h'>
								<div class="over-h w-100 h-63 fl">
										<img src="~@/assets/img/5adaf60ba5f13.jpg" class="w-100">
								</div>
								<div class="w-180 fr">
									<p class="meeting_list_title text-r">
										NO.{{index+2}}<span class="fcolor-f33">/</span>
									</p>
									<p class="p-0-10 fsize-14 fcolor-66 line-overTwo" v-html="item.title"></p>
								</div>
							</router-link>
						</li>
					</ul>
				</div>
				<!-- 中间 分类会议 -->
				<div class=" pull-left w-540 hr-sr-gray2 pl-10 pr-10">
					<!-- 支部会议 -->
					<div class="public_card">
						<div class="public_card_title bg-img-card fcolor-white">
								<span class="fsize-18 pl-15">支部大会</span> /
								<router-link :to="{path: '/meetingCenter-detail'}" class="fcolor-white">更多</router-link>
						</div>
					  <ul>
					    <li class="hr-sb-gray2 h-120 pb-15 pt-15" v-for="(item,index) in meetingList">
									<router-link :to="{path: '/meetingCenter-detail'}" class="see-details">
											<div class="pull-left w-200 over-h mr-20">
													<img src="~@/assets/img/5adafa20d7152.jpg" class="w-all">
											</div>
											<div class="pull-left w-320">
													<div class="fcolor-11" v-html="item.title"></div>
													<p class="fsize-14 fcolor-808080 mt-10 line-overf h-60">这是会议简介</p>
													<div class="fsize-12 fcolor-b3b3b3 mt-15 over-h">
														<span class="fl w-50b txt-overh">时间：2018-04-21 16:45:24 </span>
														<span class="fr w-50b txt-overh text-r">地点：河南三门峡</span>
													</div>
											</div>
									</router-link>
							</li>
						</ul>
					</div>
					<div class="public_card">
						<div class="public_card_title bg-img-card fcolor-white">
								<span class="fsize-18 pl-15">党小组会议</span> /
								<router-link :to="{path: '/meetingCenter-detail'}" class="fcolor-white">更多</router-link>
						</div>
					  <ul>
					    <li class="hr-sb-gray2 h-120 pb-15 pt-15" v-for="(item,index) in meetingList">
									<router-link :to="{path: '/meetingCenter-detail'}" class="see-details">
											<div class="pull-left w-200 over-h mr-20">
													<img src="~@/assets/img/5adafa20d7152.jpg" class="w-all">
											</div>
											<div class="pull-left w-320">
													<div class="fcolor-11" v-html="item.title"></div>
													<p class="fsize-14 fcolor-808080 mt-10 line-overf h-60">这是会议简介</p>
													<div class="fsize-12 fcolor-b3b3b3 mt-15 over-h">
														<span class="fl w-50b txt-overh">时间：2018-04-21 16:45:24 </span>
														<span class="fr w-50b txt-overh text-r">地点：河南三门峡</span>
													</div>
											</div>
									</router-link>
							</li>
						</ul>
					</div>
					<div class="public_card">
						<div class="public_card_title bg-img-card fcolor-white">
								<span class="fsize-18 pl-15">其他会议</span> /
								<router-link :to="{path: '/meetingCenter-detail'}" class="fcolor-white">更多</router-link>
						</div>
					  <ul>
					    <li class="hr-sb-gray2 h-120 pb-15 pt-15" v-for="(item,index) in meetingList">
									<router-link :to="{path: '/meetingCenter-detail'}" class="see-details">
											<div class="pull-left w-200 over-h mr-20">
													<img src="~@/assets/img/5adafa20d7152.jpg" class="w-all">
											</div>
											<div class="pull-left w-320">
													<div class="fcolor-11" v-html="item.title"></div>
													<p class="fsize-14 fcolor-808080 mt-10 line-overf h-60">这是会议简介</p>
													<div class="fsize-12 fcolor-b3b3b3 mt-15 over-h">
														<span class="fl w-50b txt-overh">时间：2018-04-21 16:45:24 </span>
														<span class="fr w-50b txt-overh text-r">地点：河南三门峡</span>
													</div>
											</div>
									</router-link>
							</li>
						</ul>
					</div>		
				</div>
				<!-- 会议排行 -->
				<div class="pull-right w-300 mr-5 over-h">
				  <div class="threeitems">
						<div class="public_card_title">
							<span class="fsize-18">会议排行</span>
						</div>
						<ol class="public_card_content over-h mt-15">
							<li v-for="(item,index) in meetingList">
								<router-link :to="{path: '/meetingCenter-detail'}" class='see-details'>
									<span class="w-75b over-h txt-overh" v-html="item.title"></span>
									<span class="pull-right">{{item.num}}人</span>
								</router-link>
							</li>	
						</ol>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
	import '@/assets/css/common.css';
	import 'swiper/dist/css/swiper.min.css';
	import { swiper, swiperSlide } from 'vue-awesome-swiper';
	export default {
		components: { 
			swiper, 
			swiperSlide 
		},
		data() {
			return {
				swiperOption: { 
				  	slidesPerView: 'auto', 
		         	centeredSlides: true, 
		         	paginationClickable: true,
		         	autoplay:{
						disableOnInteraction:false
					},
					speed: 1000,
		         	loop:true,
					autoplayDisableOnInteraction:false,
					pagination : {
						el: '.swiper-pagination',
						type: 'bullets',
						clickable: true
					},
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
						hideOnClick: true
					}
				},
				meetingList:[
					{title:'交警支队党支部大会',num:23},
					{title:'交警支队防火宣传会议',num:15},
					{title:'交警支队党支部大会',num:12},
				]
			}
		},
		computed: {   
			swiper() { 
				return this.$refs.mySwiper.swiper; 
			} 
		},
		mounted() {
			this.init();
		},
		methods: {
			init(){
				this.$parent.$data.current = 6
			}
		}
  }
</script>

<style scoped>
	/* 轮播图 */
	.banner img{
		display: block;
		width: 100%;
		height: auto;
	}
	.banner span{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 48px;
		line-height: 24px;
		background: linear-gradient(to top, #000, transparent);
		color: #fff;
		text-align: center;
	}
	.swiper-container .swiper-button-hidden{ 
		opacity : 0;
	}
	.swiper-container:hover .swiper-button-hidden{ 
		opacity : 1;
	}
	/* 轮播图结束 */
	/* 未开会议 */
	.meeting_list_title{
    font-size: 18px;
    color: #333;
    font-weight: bold;
}
ol.public_card_content{
    padding-left: 22px;
}
ol.public_card_content > li{
    display: list-item;
    list-style: decimal;
    width: 100%;
    vertical-align: top;
		line-height: 30px;
		font-size: 14px;
}
.public_card_content a{
    color: #333;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.public_card_content li{
    counter-increment: chapter;
}
.public_card_content a:before{
}
.public_card_content li:hover > a{
    color: #ff3032;
}
</style>